<template>
    <div id="app">
        <transition :name="transitionName" :class="transitionName?'fixed':''">
            <keep-alive :include="keepAlive">
                <router-view :class="iphoneX" @clearCache="clearCache" />
            </keep-alive>
        </transition>
    </div>
</template>

<script>
export default {
    data () {
        return {
            keepAlive: this.$store.getters.get_keepAlive,
            transitionName: '',
            class_: '',
            iphoneX: ''
        }
    },
    created () {
        var _this = this;
        //_this.iphoneX = 'iphoneX'
        this.Comm.storage("isX", function (d) {
            if (d) {
                //_this.iphoneX = 'iphoneX'
            } else if (_this.Comm.ios()) {
                _this.iphoneX = '_iphone'
            }
        })
    },
    watch: {
        $route (to, from) {
            //设置页面缓存 更新
            var name = to.name == "/" ? 'main' : to.name;
            if (to.meta.keepAlive && this.keepAlive.indexOf(name) < 0) {
                this.keepAlive.push(name);
                this.$store.dispatch('set_keepAlive', this.keepAlive);
            }
            if (to.path == from.path || to.meta.index == 0 || from.meta.index == 0 || this.$router.history.state == 0) {
                this.transitionName = '';
            } else {
                if (to.meta.index >= from.meta.index && !this.$router.history.state || this.$router.history.state == -1) {
                    this.transitionName = 'slide-left';//去
                } else {
                    this.transitionName = 'slide-right';//回
                }
            }
            console.log(this.transitionName)
        }
    },
    methods: {
        clearCache (key) {
            this.keepAlive = this.keepAlive.filter(e => e != key);
        }
    }
}
</script>
<style>
html,
body,
#app {
  font-size: 16px;
  /* background-color: #fff; */
  -webkit-font-smoothing: antialiased;
  height: 100%;
  width: 100%;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #fff;
  z-index: 1;
}

.slide-left-enter,
.slide-right-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100% 0);
}

.iphoneX {
  padding-top: 35px;
  box-sizing: border-box;
}

.iphoneX .van-nav-bar--fixed {
  padding-top: 35px;
  z-index: 2;
}
.iphoneX .van-sticky--fixed {
  top: 36px;
}

._iphone {
  padding-top: 20px;
  box-sizing: border-box;
}

._iphone .van-nav-bar--fixed {
  padding-top: 20px;
  z-index: 2;
}
._iphone .van-sticky--fixed {
  top: 26px;
}
</style>
